<!DOCTYPE html>
<html>
<head>
</head>
<body tiles:fragment="content">
<script>
  $(function() {
    $( document ).tooltip({
      items: "img",
      content: function() {
        var element = $( this );
        if ( element.is( "img" ) ) {
          return element.attr( "alt" );
        }
      }
    });
  });
  </script>



<div th:each="logro : ${operador.logros}" class="span-8 append-bottom colborder">
	<div th:if="${logro.fechaObtencion != null}" >
	    <div th:switch="${logro.medalla.categoria}">
		  <div th:case="'oro'" class="prepend-2"><img th:src="@{/resources/static/images/medallaOro.gif}" th:alt="${logro.medalla.descripcion}" /></div>
		  <div th:case="'plata'" class="prepend-2"><img th:src="@{/resources/static/images/medallaPlata.gif}" th:alt="${logro.medalla.descripcion}" /></div>
		  <div th:case="'bronce'" class="prepend-2"><img  th:src="@{/resources/static/images/medallaBronce.gif}" th:alt="${logro.medalla.descripcion}" /></div>
		</div>
		<br/>
		<h3 th:text="${logro.medalla.nombre}"></h3><br/>		
		<p th:if="${logro.nivelProgreso lt logro.medalla.totalProgreso}" th:text="#{consultaOperadores.progreso} + ' ' + ${logro.nivelProgreso} + ' de ' +${logro.medalla.totalProgreso}">Progreso: </p>
		<p th:unless="${logro.nivelProgreso lt logro.medalla.totalProgreso}" th:text="#{consultaOperadores.progresoObtenido}">Progreso: </p>			
		<br/>
	</div>
	<div th:if="${logro.fechaObtencion == null}" >
		<div class="prepend-2"><img th:src="@{/resources/static/images/medallaNula.gif}" th:alt="${logro.medalla.descripcion}"/></div>
		<br/>
		<h3 th:text="${logro.medalla.nombre}"></h3><br/>
		<p th:text="#{consultaOperadores.progreso} + ' ' + ${logro.nivelProgreso} + ' de ' +${logro.medalla.totalProgreso}">Progreso: </p>		
		<br/>
	</div>
	<script th:inline="javascript">			 				 
	//<![CDATA[
		  $(function() {
		    $( /*[[${'#progressbar'+ operador.id + 'm' + logro.medalla.id}]]*/ "#progressbar" 
		    		).progressbar({
		      value:  /*[[${logro.porcentajeProgreso}]]*/ 37
		    });
		    $( /*[[${'#progressbar'+ operador.id + 'm' + logro.medalla.id}]]*/ "#progressbar"
		    		).css({ 'background': 'LightYellow'  });
		    $( /*[[${'#progressbar'+ operador.id + 'm' + logro.medalla.id + ' > div'}]]*/ "#progressbar > div"
		    		).css({ 'background': 'Orange' });

		  });
	//]]>
	</script>
	<div th:id="${'progressbar' + operador.id + 'm' + logro.medalla.id}"></div>	
</div>

</body>
</html>
